{% extends '../base.html' %}

{% block main %}

<div class="page">
  <div class="flex-fill">
    <div class="header py-4">
      <div class="container">
        <div class="d-flex">
          <a class="" href="/manage/index">
            <h1>Manage-BLOG</h1>
          </a>
          <div class="d-flex order-lg-2 ml-auto">
            <div class="dropdown">
              <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                <span class="avatar avatar-md" style="background-image: url(/static/faces/male/33.jpg)"></span>
                <span class="ml-2 d-none d-lg-block">
                  <span class="text-default" id="nav_userName"> </span>
                  <small class="text-muted d-block mt-1">我是大作家</small>
                </span>
              </a>
              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                <a class="dropdown-item" href="/author/info">
                  <i class="dropdown-icon fe fe-user"></i> 个人信息
                </a>
                <a class="dropdown-item" href="/" target="_blank">
                  <i class="dropdown-icon fe fe-file-text"></i> 博客首页
                </a>
                <a class="dropdown-item" href="/author/logout">
                  <i class="dropdown-icon fe fe-log-out"></i> 退出
                </a>
              </div>
            </div>
          </div>
          <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0 collapsed" data-toggle="collapse" data-target="#headerMenuCollapse" aria-expanded="false">
            <span class="header-toggler-icon"></span>
          </a>
        </div>
      </div>
    </div>
    <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg order-lg-first">
            <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
              <li class="nav-item">
                <a href="/manage/index" class="nav-link"><i class="fe fe-home"></i> 首页</a>
              </li>
              <li class="nav-item">
                <a href="/manage/post" class="nav-link"><i class="fe fe-box"></i> 博文管理</a>
              </li>
              <li class="nav-item">
                <a href="/manage/category" class="nav-link"><i class="fe fe-box"></i> 分类管理</a>
              </li>
              <li class="nav-item">
                <a href="/manage/tags" class="nav-link"><i class="fe fe-box"></i> 标签管理</a>
              </li>
              <!-- <li class="nav-item">
                <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i>管理</a>
                <div class="dropdown-menu dropdown-menu-arrow">
                  <a href="/manage/post" class="dropdown-item ">博文管理</a>
                  <a href="/manage/category" class="dropdown-item ">分类管理</a>
                  <a href="/manage/tag" class="dropdown-item ">标签管理</a>
                </div>
              </li> -->
              <li class="nav-item">
                <a href="/manage/write_post" class="nav-link"><i class="fe fe-check-square"></i> 编辑博文</a>
              </li>
            </ul>
          </div>
        </div>
        </div>
    </div>
    <div class="my-3 my-md-5">
      {% block body %}
      {% end %}
    </div>
  </div>
</div>
<script>
  require(['jquery'], function($){
    let cur_nav = localStorage.getItem("cur_nav")
    console.log(cur_nav)
    if (cur_nav != NaN){
      
    }else{
      cur_nav = 0
    }
    $(".nav-item .nav-link").removeClass("active")
    $(".nav-item .nav-link").eq(cur_nav).addClass("active")
    
    $(".nav-item .nav-link").click(function(){
      // $(this).addClass("active")
      console.log($(".nav-item .nav-link").index(this))
      localStorage.cur_nav = $(".nav-item .nav-link").index(this)
    })

    $(".dropdown .dropdown-item").click(function(){
      localStorage.cur_nav = NaN
    })

    $("#nav_userName").text(localStorage.userName)
    console.log($("#nav_userName").text())
  })
</script>
{% end %}